<template>
	<div class="prop_con">
		<div class="shadowBox"></div>
		<div class="prop_success">
			<h3>购买成功</h3>
			<img class="prop_ok" src="../../../../images/xiaoyun.gif">
			<p class="prop_cont">嗯嗯，{{param.toolsName}}买好啦，又可以挖宝啦！</p>
			<div class="prop_img"><img src="../../../../images/shovel.png"> x {{param.toolNum}} </div>
			<div class="prop_border"><p></p></div>
			<p class="prompt">是否继续游戏？</p>
			<div class="prompt_menu">
				<span class="left" @click="promptBtn('hidden')">下次再玩</span>
				<span class="right" @click="promptBtn('continue')">继续游戏</span>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name:'propPromt',
		props:['param'],
		created:function(){},
		methods:{
			promptBtn(type){
				if(type == 'hidden'){
		            this.$router.push({name: 'home'});
		            return
		        }else{
		        	this.$router.push({
						name: 'game',
						params: {id: 1}
					});
		        }
			}
		}
	}
</script>
<style scoped>
	.prop_con{width: 100%;height: 100%;position: fixed;left: 0;top:0;}
	/*购买成功*/
	.shadowBox{width: 100%;height: 100%;position: fixed;left: 0;top:0;}
	.prop_success{
		width: calc(100% - 3rem);
		padding-bottom: 1.6rem;
		/*height: calc(100% - 10rem);*/
		/*height: 200px;*/
		background-color: rgba(42,41,47,0.97);
		position: absolute;
		left: 50%;
		top:50%;
		transform: translate(-50%,-50%);
		/*left: 1.5rem;
		top: 4rem;*/
		border-radius: 6px;
	}
	.prop_success h3{
		padding: 1.8rem 0;
		font-weight: normal;
		font-size: 1rem;
		color:#ccc;
		text-align: center;
	}
	.prop_ok{
		width: calc(100% - 12.5rem);
		display: block;
		margin-left: 6.25rem;
	}
	.prop_success p{text-align: center;}
	.prop_cont{
		font-size: 0.85rem;
		padding:1.25rem 0;
		color:#666;
	}
	.prop_img{
		padding: 1.25rem 0 0.625rem;
		text-align: center;
		color: #FFF;
	}
	.prop_img img{
		width: 1.125rem;
		margin: 0 0.15rem;
	}
	.prop_border{
		width: 100%;
		height: 1.12rem;
	}
	.prop_border p{
		float: left;
		width: calc(100% - 3.25rem);
		border-bottom: 1px solid #3a393e;
		margin-left: 1.065rem;
		padding-top: 0.56rem;
	}
	.prop_border:before,.prop_border:after{
		content: '';
		float: left;
		border-radius: 0 0.56rem 0.56rem 0;
		width: 0.56rem;
		height: 1.12rem;
		background-color: #3a393e;
		/*margin-left: -0.56rem;*/
	}
	.prop_border:after{
		float: right;
		border-radius: 0.56rem 0 0 0.56rem;
		/*margin-right: -0.56rem;*/
	}
	.prompt{
		font-size: 1.2rem;
		color:#fff;
		text-indent: 10px;
		padding:0.625rem 0 1.875rem;
	}
	.prompt_menu{
		padding:0 0.8rem;
	}
	.prompt_menu span{
		width: 48%;
		height: 2.25rem;
		line-height: 2.25rem;
		text-align: center;
		font-size: 0.85rem;
		background-color: #36353a;
		color:#ec4e8a;
		border-radius: 3px;
	}
	.prompt_menu span.right{
		color:#fff;
		background-color: #ec4e8a;
	}
</style>
